<!--
 * @页面名称:资源管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card resourceManage">
    <el-space style="margin-bottom: 10px">
      <el-button type="primary" @click="addModule" :disabled="btnStatus[0]">新增</el-button>
      <el-button @click="uploadModule" :disabled="btnStatus[1]">编辑</el-button>
      <el-button type="danger" @click="delModule" :disabled="btnStatus[2]">删除</el-button>
    </el-space>
    <div style="height: calc(100% - 42px)">
      <stable :columns="tableSetting.tableColumn" :data="tableSetting.tableData" @rowClick="rowClick"></stable>
    </div>
    <!-- 新增修改弹出框 -->
    <modal v-model:visible="modalSetting.visible" :title="modalSetting.title" width="500" @ok="handleOk">
      <el-form ref="moduleForm" :model="moduleFormData" :rules="moduleFormRules" label-width="90px">
        <el-form-item label="顺序号:">
          <el-input type="number" v-model="moduleFormData.Order" />
        </el-form-item>
        <el-form-item label="模块名称:" prop="ModuleName">
          <el-input v-model="moduleFormData.ModuleName" />
        </el-form-item>
        <el-form-item label="模块视图:" prop="View">
          <el-input v-model="moduleFormData.View" />
        </el-form-item>
        <el-form-item label="模块模型:" prop="ViewModel">
          <el-input v-model="moduleFormData.ViewModel" />
        </el-form-item>
        <el-form-item label="链接视图:">
          <el-input v-model="moduleFormData.MoreView" />
        </el-form-item>
        <el-form-item label="链接模型:">
          <el-input v-model="moduleFormData.MoreViewModel" />
        </el-form-item>
        <el-form-item label="显示行数:" prop="Number">
          <el-input type="number" v-model.number="moduleFormData.Number" />
        </el-form-item>
        <el-form-item label="所在位置:" prop="Site">
          <el-input type="number" v-model.number="moduleFormData.Site" />
        </el-form-item>
        <el-form-item label="记录时间:">
          <el-input v-model="moduleFormData.CreateDate" disabled />
        </el-form-item>
        <el-form-item label="相关备注">
          <el-input v-model="moduleFormData.Remark" />
        </el-form-item>
        <el-form-item label="选择图标">
          <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="onChange">
            <img v-if="moduleFormData.Photo" :src="moduleFormData.Photo" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </modal>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted, nextTick } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { timeFormat } from "@/utils/formatter";
import { fileToBase64 } from "@/utils/util";
import dtime from "moment";

const { proxy } = useCurrentInstance();
// 按钮状态
const btnStatus = ref([false, true, true]);
// 表格配置
const tableSetting = reactive({
  tableColumn: [
    { title: "顺序号", field: "MS_Order", sortable: true },
    {
      title: "模块Logo",
      field: "MS_Photo",
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<img src={imgStr.value + row.MS_Photo} alt="" class="MSIcon" />];
        }
      }
    },
    { title: "模块名称", field: "MS_ModuleName", sortable: true },
    { title: "模块视图", field: "MS_View", sortable: true },
    { title: "模块模型", field: "MS_ViewModel", sortable: true },
    { title: "链接视图", field: "MS_MoreView", sortable: true },
    { title: "链接模型", field: "MS_MoreViewModel", sortable: true },
    { title: "所处位置", field: "MS_Site", sortable: true },
    { title: "显示行数", field: "MS_Number", sortable: true },
    { title: "所属用户", field: "", sortable: true },
    { title: "记录时间", field: "MS_CreateDate", sortable: true, formatter: timeFormat }
  ],
  tableData: [] as any[],
  rowClickObj: {} as any
});
// 弹框配置
const modalSetting = reactive({
  visible: false,
  title: ""
});
// 表单绑定字段
const moduleFormData = reactive({
  Order: 1,
  ModuleName: "",
  View: "",
  ViewModel: "",
  Photo: "",
  Number: null,
  CreateDate: "",
  Remark: "",
  Site: null,
  MoreView: "",
  MoreViewModel: ""
});
// 表单规则
const moduleFormRules = reactive({
  ModuleName: [{ required: true, message: "请输入模块名称", trigger: "change" }],
  View: [{ required: true, message: "请输入模块视图", trigger: "change" }],
  ViewModel: [{ required: true, message: "请输入模块模型", trigger: "change" }],
  Number: [{ required: true, message: "请输入行数", trigger: "change" }],
  Site: [{ required: true, message: "请输入所在位置", trigger: "change" }]
});
// 表单实例
const moduleForm = ref();
// 图片前缀
const imgStr = ref("data:image/jpeg;base64,");
// 获取数据
const getModules = () => {
  proxy.$vueAxios.get("MasterBaseModuleSet/Get").then((res: any) => {
    tableSetting.tableData = res.List;
  });
};
// 表格单击事件
const rowClick = ({ row }: any) => {
  tableSetting.rowClickObj = row;
  btnStatus.value = [false, false, false];
};
// 新增
const addModule = () => {
  modalSetting.title = "新增";
  modalSetting.visible = true;
  moduleForm.value?.resetFields();
  nextTick(() => {
    moduleFormData.CreateDate = dtime(new Date()).format("YYYY-MM-DD HH:mm:ss");
    if (tableSetting.tableData.length > 0) {
      const order = tableSetting.tableData[tableSetting.tableData.length - 1].MS_Order + 1;
      moduleFormData.Order = order;
    } else {
      moduleFormData.Order = 1;
    }
  });
};
// 修改
const uploadModule = () => {
  modalSetting.title = "修改";
  modalSetting.visible = true;
  moduleFormData.CreateDate = tableSetting.rowClickObj.MS_CreateDate;
  moduleFormData.ModuleName = tableSetting.rowClickObj.MS_ModuleName;
  moduleFormData.MoreView = tableSetting.rowClickObj.MS_MoreView;
  moduleFormData.MoreViewModel = tableSetting.rowClickObj.MS_MoreViewModel;
  moduleFormData.Number = tableSetting.rowClickObj.MS_Number;
  moduleFormData.Order = tableSetting.rowClickObj.MS_Order;
  moduleFormData.Photo = imgStr.value + tableSetting.rowClickObj.MS_Photo;
  moduleFormData.Remark = tableSetting.rowClickObj.MS_Remark;
  moduleFormData.Site = tableSetting.rowClickObj.MS_Site;
  moduleFormData.View = tableSetting.rowClickObj.MS_View;
  moduleFormData.ViewModel = tableSetting.rowClickObj.MS_ViewModel;
};
// 删除
const delModule = () => {
  proxy.$vueAxios.post("MasterBaseModuleSet/Delete", [tableSetting.rowClickObj.MS_ID]).then((res: any) => {
    if (res.Mark) {
      getModules();
    }
  });
};
// 图片上传
const onChange = (file: any) => {
  fileToBase64(file.raw, (res: any) => {
    moduleFormData.Photo = res;
  });
};
// 弹出框点击确认事件
const handleOk = () => {
  moduleForm.value.validate((valid: boolean) => {
    if (valid) {
      if (modalSetting.title === "新增") {
        const params = {
          mS_ID: proxy.$global.createID(),
          mS_ModuleName: moduleFormData.ModuleName,
          mS_View: moduleFormData.View,
          mS_ViewModel: moduleFormData.ViewModel,
          mS_Photo: moduleFormData.Photo.split(",")[1],
          mS_Number: moduleFormData.Number,
          mS_CreateDate: moduleFormData.CreateDate,
          mS_Order: moduleFormData.Order,
          mS_Remark: moduleFormData.Remark,
          mS_Site: moduleFormData.Site,
          mS_MoreView: moduleFormData.MoreView,
          mS_MoreViewModel: moduleFormData.MoreViewModel
        };
        proxy.$vueAxios.post("MasterBaseModuleSet", params).then((res: any) => {
          if (res.Mark) {
            getModules();
            modalSetting.visible = false;
          }
        });
      } else if (modalSetting.title === "修改") {
        const params = {
          mS_ID: tableSetting.rowClickObj.MS_ID,
          mS_ModuleName: moduleFormData.ModuleName,
          mS_View: moduleFormData.View,
          mS_ViewModel: moduleFormData.ViewModel,
          mS_Photo: moduleFormData.Photo.split(",")[1],
          mS_Number: moduleFormData.Number,
          mS_CreateDate: moduleFormData.CreateDate,
          mS_Order: moduleFormData.Order,
          mS_Remark: moduleFormData.Remark,
          mS_Site: moduleFormData.Site,
          mS_MoreView: moduleFormData.MoreView,
          mS_MoreViewModel: moduleFormData.MoreViewModel
        };
        proxy.$vueAxios.put("MasterBaseModuleSet", params).then((res: any) => {
          if (res.Mark) {
            getModules();
            modalSetting.visible = false;
          }
        });
      }
    }
  });
};
onMounted(() => {
  getModules();
});
</script>

<style scoped lang="scss">
.resourceManage {
  height: 100%;
  :deep(.MSIcon) {
    width: 20px;
    height: 20px;
  }
  .avatar-uploader {
    height: 50px;
    width: 50px;
    :deep(.el-upload) {
      height: 100%;
      width: 100%;
      border: 1px dashed #ccc;
      .avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
